import React from 'react'
import { Form, Input, InputNumber, Radio, Switch, message, Upload, Button } from 'antd'
import { UploadOutlined } from '@ant-design/icons'

export default () => {
    const handleUploadChange = (info: any): any => {
        let fileList = info.fileList;
        fileList = fileList.slice(-1);
        if (info.file.status === 'done') {
            message.success(`${info.file.name}文件上传成功`);
            fileList[0].url = fileList[0]['response']['data']['filePath'];
        }
        return fileList
    };

    return (
        <Form
            labelCol={{ span: 3 }}
            wrapperCol={{ span: 11 }}
        >
            <nav style={{ borderLeft: "4px solid #4685FD", paddingLeft: "10px", marginBottom: "28px", fontWeight: 600, fontSize: "16px" }}>基础上传</nav>
            <Form.Item label="上传大小" help="允许上传的文件大小，0为不限制">
                <InputNumber />
            </Form.Item>
            <Form.Item label="图片扩展名" help="设置允许上传的文件扩展名，多个扩展名之间用“,”隔开，如不填则为不限制">
                <Input />
            </Form.Item>
            <Form.Item label="图片Mime类型" help="设置允许上传的文件mime类型，多个类型之间用“,”隔开，如不填则为不限制">
                <Input />
            </Form.Item>

            <nav style={{ borderLeft: "4px solid #4685FD", paddingLeft: "10px", marginBottom: "28px", fontWeight: 600, fontSize: "16px" }}>缩略图</nav>
            <Form.Item label="自定义裁剪位置">
                <Radio.Group>
                    <Radio value={1}>上左</Radio>
                    <Radio value={2}>上中</Radio>
                    <Radio value={3}>上右</Radio>
                    <Radio value={4}>左</Radio>
                    <Radio value={5}>中</Radio>
                    <Radio value={6}>右</Radio>
                    <Radio value={7}>下左</Radio>
                    <Radio value={8}>下中</Radio>
                    <Radio value={9}>下右</Radio>
                </Radio.Group>
            </Form.Item>

            <Form.Item label="缩略大图（单位：px）">
                <Input />
            </Form.Item>
            <Form.Item label="缩略中图（单位：px）">
                <Input />
            </Form.Item>
            <Form.Item label="缩略小图（单位：px）">
                <Input />
            </Form.Item>

            <nav style={{ borderLeft: "4px solid #4685FD", paddingLeft: "10px", marginBottom: "28px", fontWeight: 600, fontSize: "16px" }}>水印设置</nav>

            <Form.Item label="是否开启水印" valuePropName="checked" help="开启水印设置之后所有上传图片都会有水印标志">
                <Switch />
            </Form.Item>

            <Form.Item label="水印类型">
                <Radio.Group>
                    <Radio value={1}>图片</Radio>
                    <Radio value={2}>文字</Radio>
                </Radio.Group>
            </Form.Item>
            <Form.Item label="水印图片来源" valuePropName="fileList" getValueFromEvent={handleUploadChange}>
                <Upload
                    action='http://127.0.0.1:8888/admin/tool/upload'
                    listType='picture'
                >
                    <Button>
                        <UploadOutlined /> Upload
                        </Button>
                </Upload>
            </Form.Item>
            <Form.Item label="水印图片位置">
                <Radio.Group>
                    <Radio value={1}>上左</Radio>
                    <Radio value={2}>上中</Radio>
                    <Radio value={3}>上右</Radio>
                    <Radio value={4}>左</Radio>
                    <Radio value={5}>中</Radio>
                    <Radio value={6}>右</Radio>
                    <Radio value={7}>下左</Radio>
                    <Radio value={8}>下中</Radio>
                    <Radio value={9}>下右</Radio>
                </Radio.Group>
            </Form.Item>

            <Form.Item label="水印图片透明度" help="水印图片透明度，用百分数表示，可为0-100%，0为不透明">
                <InputNumber />
            </Form.Item>

            <Form.Item label="水印图片倾斜度" help="水印图片倾斜的角度">
                <InputNumber />
            </Form.Item>

            <Form.Item label="水印横坐标偏移量" help="水印相对于横坐标偏移的距离，用像素单位表示">
                <InputNumber />
            </Form.Item>

            <Form.Item label="水印纵坐标偏移量" help="水印相对于纵坐标偏移的距离，用像素单位表示">
                <InputNumber />
            </Form.Item>
            <Form.Item wrapperCol={{ offset: 3 }} style={{ marginTop: "12px" }}>
                <Button type="primary">保存</Button>
            </Form.Item>
        </Form>
    )
}